<template>
  <div class="app-container viewpagerAdd-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>房源信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼盘名称">
              <el-input name="roleName" clearable v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼盘标题" prop="title">
              <el-input name="roleType" clearable v-model="ruleForm.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="楼栋" prop="storiedBuilding">
              <el-col :span="8">
                <el-input v-model="ruleForm.buildingNum">
                  <template slot="append">栋</template>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="ruleForm.buildingUnit">
                  <template slot="append">单元</template>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="ruleForm.buildingFloorNum">
                  <template slot="append">名牌号</template>
                </el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租金" prop="rent">
              <el-input placeholder="租金" v-model="ruleForm.rent">
                <template slot="append">元/月</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="paymentMethod">
              <el-select v-model="ruleForm.paymentMethod">
                <el-option
                  v-for="item in paymentMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="租赁方式" prop="rentMethod">
              <el-select v-model="ruleForm.rentMethod">
                <el-option
                  v-for="item in rentMethods"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="户型" prop="houseType">
              <el-col :span="4">
                <el-input v-model="shi">
                  <template slot="append">室</template>
                </el-input>
              </el-col>
              <el-col :span="5">
                <el-input v-model="ting">
                  <template slot="append">厅</template>
                </el-input>
              </el-col>
              <el-col :span="5">
                <el-input v-model="wei">
                  <template slot="append">卫</template>
                </el-input>
              </el-col>
              <el-col :span="5">
                <el-input v-model="chu">
                  <template slot="append">厨</template>
                </el-input>
              </el-col>
              <el-col :span="5">
                <el-input v-model="yangtai">
                  <template slot="append">阳台</template>
                </el-input>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑面积" prop="coveredArea">
              <el-input v-model="ruleForm.coveredArea">
                <template slot="append">平米</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用面积" prop="useArea">
              <el-input v-model="ruleForm.useArea">
                <template slot="append">平米</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="楼层" prop="floor">
              <el-col :span="11">
                <el-input v-model="dijiceng" :span="11">
                  <template slot="prepend">第</template>
                  <template slot="append">层</template>
                </el-input>
              </el-col>
              <el-col :span="12" :offset="1">
                <el-input v-model="zongjiceng" :span="11">
                  <template slot="prepend">总</template>
                  <template slot="append">层</template>
                </el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="朝向" prop="orientation">
              <el-select v-model="ruleForm.orientation">
                <el-option
                  v-for="item in orientations"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="装修" prop="decoration">
              <el-select v-model="ruleForm.decoration">
                <el-option
                  v-for="item in decorations"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="配套设施" prop="facilities">
              <el-checkbox-group v-model="ruleForm.facilities">
                <el-checkbox label="1">水</el-checkbox>
                <el-checkbox label="2">电</el-checkbox>
                <el-checkbox label="3">煤气/天然气</el-checkbox>
                <el-checkbox label="4">暖气</el-checkbox>
                <el-checkbox label="5">有线电视</el-checkbox>
                <el-checkbox label="6">宽带</el-checkbox>
                <el-checkbox label="7">电梯</el-checkbox>
                <el-checkbox label="8">车位/车库</el-checkbox>
                <el-checkbox label="9">地下室/储藏室</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>图片信息</span>
        </div>
        <el-form ref="roleUpdateForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="房源描述">
                <el-input
                  type="textarea"
                  placeholder="请输入备注信息"
                  v-model="ruleForm.houseDesc"
                  rows="8"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上传室内图">
                <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  list-type="picture"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>出租信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contact">
              <el-input clearable v-model="ruleForm.contact"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile">
              <el-input clearable v-model="ruleForm.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务费" prop="propertyCost">
              <el-input v-model="ruleForm.propertyCost">
                <template slot="append">元/平</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="看房时间" prop="time">
              <el-select v-model="ruleForm.time">
                <el-option
                  v-for="item in times"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
          <el-button @click="resetForm('ruleForm')">重 置</el-button>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'add-resource',
    data() {
      var checkStoriedBuilding = (rule, value, callback) => {
        if (!this.ruleForm.buildingFloorNum || !this.ruleForm.buildingNum || !this.ruleForm.buildingUnit) {
          callback(new Error('此项为必填项'))
        }
        callback()
      };
      var checkHouseType = (rule, value, callback) => {
        if (!this.shi || !this.ting || !this.chu || !this.wei || !this.yangtai) {
          callback(new Error('此项为必填项'))
        }
        callback()
      };
      var checkFloor = (rule, value, callback) => {
        if (!this.dijiceng || !this.zongjiceng) {
          callback(new Error('此项为必填项'))
        }
        callback()
      }
      return {
        input1: '',
        fileList: [],
        paymentMethods: [{ // 支付方式
          value: '1',
          label: '付一押一'
        }, {
          value: '2',
          label: '付三押一'
        }, {
          value: '3',
          label: '付六押一'
        }, {
          value: '4',
          label: '年付押一'
        }, {
          value: '5',
          label: '其他'
        }],
        rentMethods: [{ // 租赁方式
          value: '1',
          label: '整租'
        }, {
          value: '2',
          label: '合租'
        }],
        orientations: [{ // 朝向
          value: '东',
          label: '东'
        }, {
          value: '南',
          label: '南'
        }, {
          value: '西',
          label: '西'
        }, {
          value: '北',
          label: '北'
        }],
        decorations: [{
          value: '1',
          label: '精装'
        }, {
          value: '2',
          label: '简装'
        }, {
          value: '3',
          label: '毛胚'
        }],
        times: [{
          value: '1',
          label: '上午'
        }, {
          value: '2',
          label: '中午'
        }, {
          value: '3',
          label: '下午'
        }],
        value: '',
        shi: '',
        ting: '',
        wei: '',
        chu: '',
        yangtai: '',
        dijiceng: '', // 第几层
        zongjiceng: '', // 总几层
        ruleForm: {
          buildingFloorNum: '',
          buildingNum: '',
          buildingUnit: '',
          contact: '',
          coveredArea: '',
          created: '',
          decoration: '',
          estateId: '',
          facilities: ['1', '2', '3'],
          floor: '',
          houseDesc: '',
          houseType: '',
          id: '',
          mobile: '',
          orientation: '',
          paymentMethod: '',
          pic: '',
          propertyCost: '',
          rent: '',
          rentMethod: '',
          time: '',
          title: '',
          updated: '',
          useArea: '',
          name: ''
        },
        rules: {
          title: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          storiedBuilding: [
            {validator: checkStoriedBuilding, trigger: 'blur'}
          ],
          houseType: [
            {validator: checkHouseType, trigger: 'blur'}
          ],
          floor: [
            {validator: checkFloor, trigger: 'blur'}
          ],
          buildingUnit: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          contact: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          coveredArea: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          paymentMethod: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ],
          rentMethod: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ],
          rent: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          useArea: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          orientation: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ],
          decoration: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ],
          facilities: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ],
          mobile: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          propertyCost: [
            {required: true, message: '此项为必填项', trigger: 'blur'}
          ],
          time: [
            {required: true, message: '此项为必填项', trigger: 'change'}
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const houseResources = this.ruleForm;
            let facilities = this.ruleForm.facilities.join(",");
            houseResources.facilities = facilities; // 将数组转换成','分割字符串
            houseResources.floor = this.dijiceng + "/" + this.zongjiceng;
            houseResources.houseType = this.shi + "室" + this.ting + "厅" + this.wei + "卫" + this.chu + "厨" + this.yangtai + "阳台";
            this.$store.dispatch('resource/save', houseResources).then(response => {

            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

<style scoped>

</style>
